<template>

  <v-list-item v-ripple>

    <v-list-item-icon>
      <v-icon class="customIcon" :style="{background:bgColor}">{{icon}}</v-icon>
    </v-list-item-icon>

    <v-list-item-content>
      <v-list-item-title>{{text}}</v-list-item-title>
    </v-list-item-content>

    <v-list-item-action>

      <slot name="status"></slot>
      <v-icon>iconfont-icon iconxiangyou</v-icon>

    </v-list-item-action>

  </v-list-item>

</template>

<script>
    export default {

        props: {
            icon: {
                type: String
            },
            text: {
                type: String
            },
            bgColor: {
                type: String
            }

        },
        data() {
            return {}
        }
    }

</script>

<style scoped>
  .v-card__text {
    padding: 2px 10px;
    color: #000 !important;
  }

  .customIcon {
    color: #fff !important;
    border-radius: 50%;
    padding: 3px;
  }

  .v-list-item__icon {
    margin: 12px 0;
  }

  .v-application--is-ltr .v-list-item__action:first-child,
  .v-application--is-ltr .v-list-item__icon:first-child {
    margin-right: 20px;
  }


  .xy-list {
    /* background: #eeeeee; */
    color: rgba(0, 0, 0, 0.87);


  }


  .v-list-item {
    background: #fff;
    margin: 0;
    border-bottom: 1px solid #ddd;
  }


  .v-list-item--link:before {
    background-color: #fff;

  }


  .v-list-item__action--stack {
    align-self: inherit;
    flex-direction: unset;
  }


</style>
